<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <!-- name: {{ name }} -->
      <button @click="add">点我添加路由</button>
    </div>
    <!-- <MyComponent @click="doClick" />
    <MyGlobal @click.native="doClick2">点我弹出2</MyGlobal>
    <MyGlobal v-model="num">点我修改num</MyGlobal>
    <span>num的值是：{{ num }}</span>
    <MyGlobal :age.sync="age" :name.sync="name">点我修改年龄和姓名</MyGlobal>
    <span>姓名是：{{ name }}，年龄是：{{ age }}</span> -->
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
// import MyComponent from '@/components/MyComponent.vue'

export default {
  name: 'Dashboard',
  // components: { MyComponent },
  data() {
    return {
      // num: 7,
      // age: 20,
      // name: '张三'
    }
  },
  computed: {
    // ...mapGetters([
    //   'name'
    // ])
  },
  methods: {
    // 添加路由
    add() {
      console.log(this)
      this.$router.addRoutes([
        {
          path: '/test',
          component: () => import('@/views/test.vue')
        }
      ])
    },

    doClick() {
      alert(1)
    },
    doClick2() {
      alert(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
